<template>
  <div class="number">
    <picker
      ref="picker"
      class="picker"
      mode="multiSelector" 
      @columnchange="bindMultiPickerColumnChange"
      @change="onConfirm"
      @cancel="onCancel"
      :value="multiIndex"
      :range="columns"
    >
    <slot />
      
    </picker>
  </div>
</template>
 
<script>
export default {
  name: 'Number',
  props: {
    title: {
      type: String,
      default: ''
    },
    nextLongYear: {
      type: Number,
      default: 1
    },
    prevLongYear: {
      type: Number,
      default: 64
    }
  },
  data () {
    return {
      columns: [],
      multiIndex: [27, 0, 0]
    }
  },
  mounted () {
    this.initTimeFn()
  },
  computed: {
    years() {
      const currentDate = new Date();
      
      let startYear = currentDate.getFullYear() - this.prevLongYear; // 起始年份
      let endYear = currentDate.getFullYear() + this.nextLongYear; // 结束年份
      
      return Array.from({ length: (endYear - startYear + 1)}, (_, i) => startYear + i).map(key => key + "年").reverse();
    },
    
    months() {
      return [...Array(12).keys()].map((i) => i = ++i + "月");
    },
    
   
  },
  methods: {
    initTimeFn () {
      const date = new Date(this.years.shift().slice(0, -1), this.months[0].slice(0, -1), 0);
      this.columns = [this.years, this.months,Array.from({ length: date.getDate()}, (_, i) => i = ++i + "日")]
      console.log(this.columns)
      console.log()
    },
    onCancel () {
      // this.$emit('on-success', '')
    },
    onConfirm () {
      console.log('长呃呃呃呃呃呃')
      let [ years, mouths, days] = this.columns
      let [yearIdx, monthIdx, dayIdx] = this.multiIndex
      let selects =`${years[yearIdx].slice(0, -1)}-${this.prefixInteger(mouths[monthIdx].slice(0, -1), 2)}-${this.prefixInteger(days[dayIdx].slice(0, -1), 2)}`
      this.$emit('on-success', selects)
    },
    bindMultiPickerColumnChange(e) {
      this.multiIndex[e.detail.column] = e.detail.value
      if (e.detail.column === 1) {
        let [ years, mouths, days] = this.columns
        let [yearIdx, monthIdx, dayIdx] = this.multiIndex
        const date = new Date(years[yearIdx].slice(0, -1), mouths[monthIdx].slice(0, -1), 0);
        this.multiIndex[2] = 0
        this.$set(this.multiIndex, 2, 0)
        this.$set(this.columns, 2, Array.from({ length: date.getDate()}, (_, i) => i = ++i + "日"))
      console.log('修改的列为：' + e.detail.column + '，值为：' + this.columns)

      }
    },
  
    prefixInteger(num, length) {
      return (Array(length).join('0') + num).slice(-length);
    }
  }
}
</script>
 
<style lang="scss">
.number {
  .picker {
    font-family: WDCH-Regular;
  }
}

</style>